<template>
  <LoadingNodata :loading="loading" :data="dataList" emptyText="暂无发帖数据">
    <div v-for="(item, index) in dataList" :key="index" class="shortAndLongSentences">
      <div class="title" v-html="item.title"></div>
      <div class="translation" v-html="item.content"></div>
      <div class="time">
        {{ formatDate(item.create_time) }}
        <span class="relation">评论数&nbsp;&nbsp;{{ item.comment }}</span>
      </div>
    </div>
  </LoadingNodata>
</template>
<script setup>
import { onMounted, ref, unref, watch, defineProps, defineEmits } from "vue";
import { myPostList } from "@/service/personalCenter";
import { formatDate } from "@/utils/index";
import LoadingNodata from "@/components/LoadingNodata";

const props = defineProps({
  page: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const emit = defineEmits(['update-total', 'change']);

const dataList = ref([]);
const loading = ref(false);
const total = ref(0);

// 监听分页变化
watch(
  () => [props.page, props.pageSize],
  () => {
    fetchData();
  }
);

// 获取发帖列表数据
const fetchData = async () => {
  try {
    loading.value = true;
    const resp = await myPostList({
      page: props.page,
      rows: props.pageSize,
    });
    
    if (resp && resp.code === '000000' && resp.data) {
      dataList.value = resp.data.result || [];
      total.value = resp.data.totalCount || 0;
      emit('update-total', total.value);
    } else {
      dataList.value = [];
      total.value = 0;
      emit('update-total', 0);
    }
  } catch (error) {
    console.error('获取发帖列表失败:', error);
    dataList.value = [];
    total.value = 0;
    emit('update-total', 0);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="scss">
.shortAndLongSentences {
  border-bottom: 1px solid var(--defaultBorderColor);
  margin: 15px 10px;
  padding: 5px;
  .title {
    font-size: var(--default12px);
    color: var(--otherFontColor);
  }
  .translation {
    font-size: var(--default12px);
    color: var(--otherFontColor);
    margin: 8px 0 8px 0;
  }
  .time {
    color: var(--timeColor);
    font-size: var(--default12px);
    .relation {
      color: var(--main-color);
      margin-left: 10px;
      text-decoration: underline;
    }
  }
}
</style>
